<!-- components/EditableField.vue -->
<template>
  <view class="edit-wrapper" @click="toggleEdit">
    <text v-if="!isEditing" class="display-text">
      {{ value || placeholder }}
    </text>
    <input 
      v-else
      v-model="inputValue"
      class="edit-input"
      :placeholder="placeholder"
      @blur="saveValue"
      @confirm="saveValue"
    />
  </view>
</template>

<script>
export default {
  props: {
    value: String,
    placeholder: {
      type: String,
      default: '点击编辑'
    }
  },
  data() {
    return {
      isEditing: false,
      inputValue: this.value
    }
  },
  methods: {
    toggleEdit() {
      this.isEditing = true
      this.$nextTick(() => {
        uni.hideKeyboard()
      })
    },
    saveValue() {
      this.isEditing = false
      this.$emit('update:value', this.inputValue)
    }
  }
}
</script>

<style>
.edit-wrapper {
  display: inline-block;
  min-width: 80rpx;
}

.display-text {
  border-bottom: 1px solid #007AFF;
  color: #007AFF;
  padding: 0 10rpx;
}

.edit-input {
  border-bottom: 1px solid #007AFF;
  min-width: 80rpx;
  height: 40rpx;
}
</style>